<template>
    <div class="history-page-wrap">
        <!-- 切换视图 -->
        <div class="change-page-btn iconfont" :class="[{'icon_liebiao': showEcharts}, {'icon_tongji': !showEcharts}]" @click="changePage"></div>
        <!-- 时间、单位条件筛选 -->
        <div class="search-wrap">
            <div class="date-type">
                <span class="date-type-item" :class="{'active': cycleType == 3}" @click="cycleType = 3">月</span>
                <span class="date-type-item" :class="{'active': cycleType == 4}" @click="cycleType = 4">年</span>
            </div>
            <div class="org-choose-wrap">
                <!-- 单位筛选框 -->
                <el-select v-model="searchForm.orgId" slot="prepend" placeholder="请选择" @change="getAllData()">
                    <el-option v-if="isMuilUnitUser" label="所有单位" :value="$store.state.userInfo.organizationIds"></el-option>
                    <el-option v-for="item in orgList" :label="item.orgName" :value="item.orgId.toString()" :key="item.orgId"></el-option>
                </el-select>
            </div>
        </div>
        <!-- 统计图表 -->
        <div class="content-wrap"  v-show="showEcharts">
            <div class="time-trend-wrap">
                <p class="echart-title">高危信号时间走势</p>
                <div id="timeTrendEchart" class="time-trend-echart"></div>
            </div>
            <div class="time-point-distribution-wrap">
                <p class="echart-title">高危信号时间点分布</p>
                <div id="timePointDistributionEchart" class="time-point-distribution-echart"></div>
            </div>
            <div class="weekly-distribution-wrap">
                <p class="echart-title">高危信号周内分布</p>
                <div id="weeklyDistributionEchart" class="weekly-distribution-echart"></div>
            </div>
        </div>
        <div class="content-wrap unit-list-wrap" v-show="!showEcharts">
            <ul class="unit-list" v-infinite-scroll="getHistoryData" infinite-scroll-disabled="isOver" infinite-scroll-distance="10">
                <template v-for="(item, index) in historySingleList">
                <!-- 单位list -->
                <li :key="index">
                    <div class="unit-item blue-bg" :class="[{'blue-bg': item.handlerStatus == 1}, {'red-bg': item.handlerStatus == 0}]">
                        <div class="unit-item-name">{{ item.organizationName }}</div>
                        <p class="fire-num">{{ item.alertNum }}</p>
                        <p class="num-desc">火警数量</p>
                        <div class="fire-info">
                            <template v-if="item.handlerStatus == 1">
                                <p class="status-text">已处理</p>
                                <div class="label-item">
                                    <span class="label-text">处理人</span>
                                    <span class="label-value">{{ item.handlerAccount }}</span>
                                </div>
                                <div class="label-item">
                                    <span class="label-text">处理类型</span>
                                    <span class="label-value">{{ item.handlerTypeName }}</span>
                                </div>
                                <div class="label-item">
                                    <span class="label-text">备注</span>
                                    <span class="label-value ell">{{ item.remarks }}</span>
                                </div>
                            </template>
                            <template v-else>
                                <p class="status-text">未处理，请及时处理</p>
                            </template>
                        </div>
                        <!-- hover -->
                        <div class="hover-card">
                            <div v-if="showPhoneCall" class="call-wrap">
                                <a class="call-phone iconfont icon_phone" @click="callPhone(item)"><!-- 电话 --></a>
                                <a class="call-video iconfont icon_video" @click="openVideo(item)"><!-- 视频 --></a>
                            </div>
                            <div class="fire-details">
                                <p class="fire-details-title">{{ item.detailAlert.length || 0 }}个火警设备明细</p>
                                <div class="fire-details-content">
                                    <ul class="fire-details-list">
                                        <li class="fire-details-item" v-for="obj in item.detailAlert" :key="obj.id">
                                            <p>{{ obj.selfDesc }}</p>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                </template>
            </ul>
            <!-- 暂无数据 -->
            <div class="no-data" v-if="isOver && historySingleList.length == 0"></div>
        </div>
    </div>
</template>
<script>
import { getOrgsStatusList } from '@/api/organization'
import { getHisRiskFireCount, getHisRiskFireTimesCount, getHisRiskFireSignal } from '@/api/record'

let Echarts = require("echarts/lib/echarts");
require("echarts/lib/chart/line");
require("echarts/lib/chart/bar");
require("echarts/lib/chart/radar");
require("echarts/lib/component/tooltip");
require("echarts/lib/component/grid");
require("echarts/lib/component/angleAxis");
require("echarts/lib/component/radiusAxis");
require("echarts/lib/component/polar");

export default {
    data() {
        return {
            showEcharts: true, // 是否显示统计图表
            cycleType: 3,// 2周 3月 4年
            searchForm: {
                orgId: (this.orgId?this.orgId.toString():'') || this.$store.state.userInfo.organizationIds
            },
            pageIndex: -1,
            pageSize:20,
            isOver: false,
            timeTrendList: [],
            historySingleList: [], // 单位历史高危信号列表信息
            isMuilUnitUser:this.$store.state.userInfo.isMuilUnitUser,//0:单单位用户;1:多单位用户
            showPhoneCall:this.bsConfig.showPhoneCall!==false
        }
    },
    computed:{
        orgList(){
            return this.$store.state.orgList
        }
    },
    created() {
        this.$nextTick(() => {
            this.getTimeTrendData()
            this.getTimeAndWeeklyData()
        })
    },
    methods: {
        openVideo(item) {
            const videoList = [];
            videoList.push(item.videoDetail[0]);
            if (!this.$Ctl.getClickEnabel(1)) return;
            this.$Ctl.showVideoClient(null, videoList, "");
        },
        // 切换页面显示
        changePage() {
            this.showEcharts = this.showEcharts ? false : true
        },
        // 查询条件改变，重新获取数据
        getAllData() {
            this.getTimeTrendData()
            this.getTimeAndWeeklyData()
            this.getHistoryData(0)
        },
        // 获取高危信号时间走势数据
        getTimeTrendData() {
            let that = this

            getHisRiskFireCount({
                type: that.cycleType,	
                orgIds: that.searchForm.orgId
            }).then(res => {
                if(res.status === 200) {
                    that.timeTrendList = res.data
                    that.initTimeTrendEcharts(res.data)
                }
            })
        },
        // 获取高危信号时间点分布数据和高危信号周内分布数据
        getTimeAndWeeklyData() {
            let that = this
            getHisRiskFireTimesCount({
                type: that.cycleType,	
                orgIds: that.searchForm.orgId
            }).then(res => {
                if(res.status === 200) {
                    that.initTimePointDistributionEcharts(res.data.hour)
                    that.initWeeklyDistributionEcharts(res.data.week)
                }
            })
            
        },
        // 获取历史高危信号数据
        getHistoryData(pageIndex) {
            let that = this
            if(typeof(pageIndex) != 'undefined') {
                that.pageIndex = pageIndex
            } else {
                that.pageIndex += 1
            }
            let parames = {
                queryType: 1,
                orgIds: that.searchForm.orgId,
                type: that.cycleType,
                pageIndex: that.pageIndex,
                pageSize: that.pageSize
            }
            getHisRiskFireSignal(parames).then(res => {
                if(res.status === 200) {
                    if(typeof(pageIndex) != 'undefined' && that.pageIndex === 0) {
                        that.isOver = false
                        // 重新查询
                        that.historySingleList = res.data
                    } else {
                        that.historySingleList.push.apply(that.historySingleList, res.data)
                    }
                    
                    // 最后一页停止滚动加载
                    if(res.data.length < that.pageSize) {
                        that.isOver = true
                    } else {
                        that.isOver = false
                    }
                }
            })
        },
        // 初始化高危信号时间走势图表
        initTimeTrendEcharts(data) {
            let that = this
            let xArray = []
            let yArray = []

            $.each(data,(index,obj)=>{
                xArray.push(that.cycleType == 3 ? obj.dayTime : obj.monthTime);
                yArray.push(obj.signalCount);
            })
            //画图
            let options = {
                grid: {
                    left: '40px',
                    right: '30',
                    top: '35',
                    bottom: '30'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        animation: false
                    },
                    formatter: '{b}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#4191F0;"></span>高危信号{c}个'
                },
                xAxis: [{
                    type: 'category',
                    axisTick: { 
                        show: true,
                        interval:  0,
                    },
                    boundaryGap: false,
                    splitNumber: xArray.length,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(105, 115, 125, 0.3)'
                        }
                    },
                    axisLabel: {
                        show: true,
                        color: '#A3BEDD',
                        interval: 0,
                        // rotate: -45,
                        formatter: function (value, index) {
                            if(that.cycleType == 3) {
                                return value.substring(5)
                            } else {
                                return value
                            }
                        },
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(105, 115, 125, 0.3)'
                        }
                    },
                    data: xArray,
                }],
                yAxis: [{
                    type: 'value',
                    axisTick: { show: false },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(105, 115, 125, 0.3)',
                        }
                    },
                    axisLabel: {
                        show: false,
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(105, 115, 125, 0.3)',
                            width: 1,
                        }
                    },
                }],
                series: [{
                    type: 'line',
                    smooth: true,
                    symbol:"circle",
                    symbolSize:10,
                    // areaStyle: { normal: {} },
                    label: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: '#fff',
                        }
                    },
                    itemStyle: {
                        normal: {
                            lineStyle:{
                                width:1.5,//折线宽度
                            },
                            color:"#4191F0"//折线颜色
                        },
                        emphasis: {
                            color: '#4191F0'
                        },
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(105, 115, 125, 0.3)',
                            width: 1,
                        }
                    },
                    data: yArray
                }]
            };
            Echarts.init(document.getElementById('timeTrendEchart')).setOption(options, true)
        },
        // 初始化高危信号时间点分布
        initTimePointDistributionEcharts(data) {
            /* 展示区域柱状图占比59% 中心空区域占比40% 展示取柱状图首尾间隔各占0.05%*/
            let that = this
            let space = 0 // 距离0的间隔（占比5%）
            let spaceArr = []
            let minData = 0
            let maxData = 0
            for(let key in data) {
                if(data[key] > maxData) {
                    maxData = data[key]
                }
            }
            space = (maxData)*0.05
            minData = (maxData/0.595)*0.4
            for(let i=0; i < 12;i++) {
                spaceArr.push(space)
            }
            let options = {
                tooltip: { //提示框组件
                    trigger: 'item', //触发类型,'item'数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。 'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
                    triggerOn: "mousemove", //提示框触发的条件,'mousemove'鼠标移动时触发。'click'鼠标点击时触发。'mousemove|click'同时鼠标移动和点击时触发。'none'不在 'mousemove' 或 'click' 时触发
                    showContent: true, //是否显示提示框浮层
                    alwaysShowContent: false, //是否永远显示提示框内容
                    showDelay: 0, //浮层显示的延迟，单位为 ms
                    hideDelay: 0, //浮层隐藏的延迟，单位为 ms
                    enterable: false,
                    formatter : function (params, ticket, callback) {
                        return `${params.name} : 信号发生${params.data}次`
                    }//'{b} : 信号发生{c}次'
                },
                angleAxis: {
                    type: 'category',
                    startAngle: 180,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(65,145,240,1)', //'#005B97',
                            width: 15
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: true,
                        interval: "0",
                        color: '#74B5EB',
                        fontSize: 20,
                        padding: 10
                    },
                    splitLine: {
                        show: false
                    },
                    data: ['0-2h', '2-4h', '4-6h', '6-8h', '8-10h', '10-12h', '12-14h', '14-16h', '16-18h', '18-20h', '20-22h', '22-24h', '', '', '', '', '', '', '', '', '', '', '', '',],
                },
                radiusAxis: {
                    min: '-' + minData,
                    max: (maxData+2*space),
                    splitNumber: 1,
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(65,145,240,.2)',
                            width: 4
                        }
                    },
                    z: 120
                },
                polar: {
                    radius: 315,
                    center: ['50%', '100%']
                },
                series: [
                    {
                        type: 'bar',
                        center: ['47%', '70%'],
                        data: spaceArr,
                        coordinateSystem: 'polar',
                        name: '中心',
                        color: 'rgba(13,36,56,1)',
                        itemStyle: {
                            borderColor: 'rgba(13,36,56,1)',
                            borderWidth: 2
                        },
                        emphasis: {
                            label: {
                                show: false
                            },
                            itemStyle: {
                                color: 'rgba(13,36,56,1)',
                                borderColor: 'rgba(13,36,56,1)',
                                borderWidth: 2
                            }
                        },
                        tooltip: {
                            show: false
                        },
                        // stack: 'a',
                        barGap: '-100%',
                        z:100
                    },
                    {
                        type: 'bar',
                        data: [ data.two, data.two, data.three, data.four, data.five, data.six, data.seven, data.eight, data.nine, data.ten, data.eleven, data.twelve],
                        coordinateSystem: 'polar',
                        name: '时间点分布',
                        color: '#B9537B',
                        z:10,
                        // stack: 'a'
                    }
                ]
            };

            Echarts.init(document.getElementById('timePointDistributionEchart')).setOption(options, true)
        },
        // 初始化高危信号周内分布
        initWeeklyDistributionEcharts(data) {
            let that = this
            let maxData = 0
            for(let key in data) {
                if(data[key] > maxData) {
                    maxData = data[key]
                }
            }
            maxData = maxData * 1.2
            let options = {
                tooltip: {},
                radar: {
                    // shape: 'circle',
                    radius: '88%',
                    center: ['50%', '55%'],
                    name: {
                        textStyle: {
                            color: '#4191F0',
                            padding: [3, 5],
                            fontSize: '18',
                            fontWeight: 'bold'
                        }
                    },
                    nameGap: '10',
                    splitNumber: '4',
                    indicator: [
                        { name: '周一', max: maxData},
                        { name: '周二', max: maxData},
                        { name: '周三', max: maxData},
                        { name: '周四', max: maxData},
                        { name: '周五', max: maxData},
                        { name: '周六', max: maxData},
                        { name: '周日', max: maxData}
                    ],
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(163,190,221,.2)'
                        }
                    },
                    splitArea: {
                        areaStyle: {
                            color: 'rgba(255,255,255, 0)'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: ['rgba(163,190,221,.2)', 'rgba(163,190,221,.2)', 'rgba(163,190,221,.2)', 'rgba(163,190,221,.2)', 'rgba(163,190,221,1)']
                        }
                    }
                },
                series: [{
                    name: '高危信号周内分布',
                    type: 'radar',
                    symbol: 'none',
                    areaStyle: {
                        normal: {
                            color: 'rgba(24,155,255,0.2)'
                        }
                    },
                    lineStyle: {
                        normal: {
                            color: 'rgba(24,155,255,1)',
                            width: 4
                        }
                    },
                    data : [
                        {
                            value : [data.mon, data.tue, data.wed, data.thu, data.fri, data.sat, data.sun],
                            name : '高危信号周内分布'
                        }
                    ]
                }]
            }
            Echarts.init(document.getElementById('weeklyDistributionEchart')).setOption(options, true)
        },
        callPhone(obj) {
            this.$emit('openCellCenter', obj.organizationId)
        }
    },
    watch: {
        cycleType(val, oldVal) {
            if(val && oldVal != val) {
                this.getAllData()
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.history-page-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    .change-page-btn {
        top: -70px;
        right: 0;
    }
    .content-wrap {
        height: 100%;
        .time-trend-wrap {
            margin-bottom: 1%;
            padding: 40px 50px 10px 50px;
            width: 100%;
            height: 49%;
            background:rgba(255,255,255, 0.02);
            .time-trend-echart {
                width: 100%;
                height: calc(100% - 40px);
            }
        }
        .time-point-distribution-wrap {
            padding: 35px 50px 20px 50px;
            width: 49.5%;
            height: 49%;
            background:rgba(255,255,255,.02);
            .time-point-distribution-echart {
                width: 100%;
                height: calc(100% - 40px);
            }
        }
        .weekly-distribution-wrap {
            padding: 35px 50px 20px 50px;
            width: 49.5%;
            height: 49%;
            background:rgba(255,255,255,.02);
            .weekly-distribution-echart {
                margin-top: -40px;
                width: 100%;
                height: 100%;//calc(100% - 40px);
            }
        }
    }
    .unit-list-wrap {
        margin-top: 0;
        padding: 20px 0;
        background: url(../../../../../assets/images/detailPage/bg-item.png);
    }
}
</style>
